<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 400px;
      /* height: 30px; */
      background-color: pink;
      border: 1px solid #000;
    }

    .child1 {
      /* float: left;
      width: 80px;
      height: 80px; */
      /* display: inline-block; */
      background-color: yellowgreen;
    }

    .child2 {
      background-color: green;
    }

    .child3 {
      background-color: red;
    }

    .inline-block {
      display: inline-block;
    }

    .float-left {
      float: left;
    }
    .block {
      background-color: skyblue;
    }
    .inline {
      background-color: grey;
    }
    .square {
      width: 80px;
      height: 80px;
      background-color: burlywood;
    }
  </style>
</head>
<script>
  /*
    1. 块级元素
      - 自成一行，多个元素从上到下顺序排列
      - 默认宽为父元素宽度，默认高为内容高度
      - 可设置宽高
      - 内容超出后不换行，不隐藏
    2. 行内元素
      - 多个行内元素从左到右顺序排列
      - 默认宽高为内容宽高
        - 宽度为当前行内容实际宽度
      - 不可设置宽高
      - 内容超出后不换行，不隐藏
    3. 行内块元素
      - 多个行内块元素从左到右顺序排列
      - 默认宽高为内容宽高
        - 宽度为内容所有行的最大值
      - 可设置宽高
      - 内容超出后不换行，不隐藏
    4. 浮动
      - 块级元素、行内元素浮动后
        - 变为块级元素
        - 默认宽度为内容所有行最大值，高度为内容高度
        - 可设置宽高
        - 内容超出后不换行，不隐藏
      - 浮动元素的宽度和超过父元素，则会换行
      - 如果父元素没有给定高度，则元素浮动后，父元素会塌陷
  */
</script>

<body>
  <!-- <div class="container"> -->
    <!-- 行内元素 -->
    <!-- <span class="child1">inline child1</span>
    <span class="child2">inline child2</span>
    <span class="child3">inline child3</span>
    <span class="child1">inline child1</span>
    <span class="child2">inline child2</span> -->
    <!-- 块级元素 -->
    <!-- <div>block child1</div>
    <div>block child2</div>
    <div>block child3</div> -->
    <!-- 行内块元素 -->
    <!-- <div class="inline-block">inline-block child1</div>
    <div class="inline-block">inline-block child2</div>
    <div class="inline-block">inline-block child3</div> -->
    <!-- 浮动元素 -->
    <!-- <span class="float-left">float-left child1</span>
    <span class="float-left">float-left child2</span>
    <span class="float-left">float-left child3</span> -->
  <!-- </div> -->
  <div class="container">
    <!-- 浮动元素 + 行内元素 -->
    <!-- <span class="float-left square">float-left child1</span> -->
    <!-- <span class="float-left square">float-left child2</span> -->
    <!-- <span class="float-left square">float-left child3</span> -->
    <!-- <span class="inline">行内元素</span> -->
    <!-- 浮动元素 + 块级元素 -->
    <span class="float-left square">float-left child1</span>
    <span class="float-left square">float-left child2</span>
    <span class="float-left square">float-left child3</span>
    <div class="block ">块级元素</div>
  </div>
</body>

</html>